<template>
  <view class="container">
    <!-- 动态列表 -->
    <view class="itme" v-for="(item, index) in list" :key="index">
      <view class="" @click.stop="godetail(item)">
        <view class="header">
          <image @click.stop="gouserhome" :src="$getimgsrc(item.avatar)" style="width: 88rpx; height: 88rpx; border-radius: 50%" mode=""></image>
          <view style="padding-left: 16rpx">
            <view class="topright">
              <text style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">{{ item.nickname }}</text>
              <image
                style="width: 28rpx; height: 28rpx; vertical-align: middle"
                :src="item.gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
                mode=""
              ></image>
            </view>
            <view style="font-weight: 400; font-size: 24rpx; color: #666666">{{ util.timeChange3(item.createtime) }} {{ item.address }}</view>
          </view>
          <view class="position" @click.stop="close(item, index)">
            <image src="@/static/myimg/a21.png" style="width: 32rpx; height: 32rpx"></image>
            <text style="display: block; color: #ff3742; font-size: 24rpx; line-height: 0; margin-top: 5rpx">删除</text>
          </view>
        </view>
        <view
          style="
            font-weight: 500;
            font-size: 28rpx;
            color: #151515;
            width: 670rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-top: 24rpx;
          "
        >
          {{ item.content }}
        </view>
      </view>
      <!-- 图片视频 -->
      <view style="margin-top: 20rpx">
        <firstimg :list="item.images"></firstimg>
      </view>
      <!-- 点赞、评论 -->
      <view style="display: flex; justify-content: space-between">
        <!-- 审核原因 -->
        <!-- text-overflow: ellipsis; overflow: hidden; white-space: nowrap -->
        <view
          style="
            font-size: 26rpx;
            color: #000;
            flex: 1;
            max-width: 520rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            overflow: hidden;
          "
        >
          {{ item.status == 2 ? '已审核' : item.status == 1 ? '待审核' : item.status == 3 ? '审核失败' + '-' + item.refuse : '' }}
        </view>
        <view style="display: flex; align-items: center">
          <view>
            <image
              @click.stop="dianzhan(item, index)"
              :src="item.is_like == 0 ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
              style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"
              mode=""
            ></image>
            <text>{{ item.like_num }}</text>
          </view>
          <view style="margin-left: 40rpx">
            <image src="../../static/dynamicimg/pinglun.png" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode=""></image>
            <text>{{ item.comment_num }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="itme" @click.stop="godetail">
            <view class="header">
                <image @click.stop="gouserhome" src="../../static/myimg/logo.png" style="width: 88rpx; height: 88rpx; border-radius: 50%" mode=""></image>
                <view style="padding-left: 16rpx">
                    <view class="topright">
                        <text style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">环环</text>
                        <image
                            style="width: 28rpx; height: 28rpx; vertical-align: middle"
                            :src="gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
                            mode=""
                        ></image>
                    </view>
                    <view style="font-weight: 400; font-size: 24rpx; color: #666666">2024-08-09·河北省保定市</view>
                </view>
                <view class="position" @click.stop="close">
                    <image src="@/static/myimg/a21.png" style="width: 32rpx; height: 32rpx"></image>
                    <text style="display: block; color: #ff3742; font-size: 24rpx; line-height: 0; margin-top: 5rpx">删除</text>
                </view>
            </view>
            <view
                style="
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #151515;
                    width: 670rpx;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    margin-top: 24rpx;
                "
            >
                字字句句透深情无限北岛情书~
            </view>
            <view style="display: flex; flex-wrap: wrap; align-items: center; margin-top: 20rpx">
                <image src="../../static/logo.png" style="width: 200rpx; height: 200rpx; margin-right: 16rpx; margin-bottom: 10rpx" mode="" v-for="index in 4"></image>
                <video src="" style="width: 200rpx; height: 200rpx"></video>
            </view>
            <view style="display: flex; justify-content: flex-end">
                <view style="display: flex; align-items: center">
                    <view>
                        <image
                            @click.stop="islike = !islike"
                            :src="islike ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
                            style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"
                            mode=""
                        ></image>
                        <text>55</text>
                    </view>
                    <view style="margin-left: 40rpx">
                        <image src="../../static/dynamicimg/pinglun.png" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode=""></image>
                        <text>15</text>
                    </view>
                </view>
            </view>
        </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      hometop: '',
      navheight: '',
      gender: 1,
      islike: true,
      page: 1,
      list: []
    };
  },
  onReachBottom() {
    if (this.list.length < this.page * 10) return;
    this.page++;
    this.getlist();
  },
  onLoad() {
    this.getlist();
  },
  methods: {
    dianzhan(item, index) {
      this.http('/dynamic/operate', {
        dynamic_id: item.id
      }).then((res) => {
        if (res.code == 1) {
          this.list[index].is_like = this.list[index].is_like == 1 ? 0 : 1;
          this.list[index].like_num = this.list[index].like_num == 0 ? this.list[index].like_num + 1 : this.list[index].like_num - 1;
        }
      });
    },
    getlist() {
      this.http('/dynamic/mydynamic', {
        page: this.page
      }).then((res) => {
        console.log(res.data.data);
        this.list = [...this.list, ...res.data.data];
      });
    },
    close(item, index) {
      uni.showModal({
        title: '删除动态',
        content: '确认删除这条动态吗?',
        cancelColor: '#CCCFDB',
        confirmColor: '#FF3742',
        success: (res) => {
          if (res.confirm) {
            this.http('/dynamic/dynamicdel', {
              dynamic_id: item.id
            }).then((res) => {
              if (res.code == 1) {
                this.list.splice(index, 1);
                uni.showToast({
                  title: res.msg
                });
              }
            });
          } else if (res.cancel) {
          }
        }
      });
    },
    // 跳转到用户资料
    gouserhome() {
      uni.navigateTo({
        url: '/dynamic/userhome/userhome'
      });
    },
    // 跳转到动态详情
    godetail(item) {
      uni.navigateTo({
        url: '/dynamic/dynamicdetail/dynamicdetail?id=' + item.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20rpx;
  font-size: 14px;
  line-height: 24px;
  .itme {
    width: 690rpx;
    border-bottom: 2rpx solid #e8e8e8;
    padding-bottom: 34rpx;
    margin-top: 20rpx;
    .header {
      display: flex;
      position: relative;
      .position {
        position: absolute;
        right: 0;
        text-align: center;
      }
    }
  }
}
</style>
